<template>
  <div :id="id" :class="className" :style="{ height: height, width: width }" ref="chartsRef" />
</template>
<script lang="ts" setup>
  import * as echarts from 'echarts'
  import { onMounted, reactive, ref } from 'vue'
  const chartsRef = ref<HTMLElement | null>()
  const data = ref()

  const props = defineProps({
    className: {
      type: String,
      default: 'chart',
    },
    xAxisData: {
      type: Array,
      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    config: {
      type: Object,
      default: () => {},
    },
    seriesData: {
      type: Array,
      default: () => [150, 230, 224, 218, 135, 147, 260],
    },
    id: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
  })
  const options = reactive({
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#00D2FF',
          },
          {
            offset: 1,
            color: '#2968E8',
          },
        ],
        global: false,
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#1ED94F',
          },
          {
            offset: 1,
            color: '#F2F047',
          },
        ],
        global: false,
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#FB7099',
          },
          {
            offset: 1,
            color: '#FEDC45',
          },
        ],
        global: false,
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#AE2CF1',
          },
          {
            offset: 1,
            color: '#7776FF',
          },
        ],
        global: false,
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#E62490',
          },
          {
            offset: 1,
            color: '#C8E3FA',
          },
        ],
        global: false,
      },
    ],
    textStyle: {
      color: '#fff',
    },
    legend: {
      top: 0,
      right: 0,
      data: [],
      textStyle: {
        color: '#FFFFFF',
      },
    },
    grid: {
      show: true,
      backgroundColor: 'rgba(89,164,240,0.1)',
      borderColor: 'rgba(89,164,240,0.1)',
      top: '30px',
      left: '1%',
      right: '1%',
      bottom: 0,
      containLabel: true, //grid 区域是否包含坐标轴的刻度标签
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, //坐标轴两边留白策略
      splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
      data: [],
    },
    yAxis: {
      type: 'value',
      name: '单位：小时',
      nameTextStyle: {
        color: '#999999',
      },
      splitLine: { show: false },
    },
    series: [],
    ...props.config,
  })
  const initChart = (data) => {
    if (data) {
      data.value = data
      options.xAxis.data = data.day
      options.series = []
      options.legend.data = []
      data.data.forEach((item) => {
        options.legend.data.push(item.legend[0])
        options.series.push({
          name: item.legend[0],
          type: 'line',
          smooth: true,
          showSymbol: false,
          data: item.data,
          lineStyle: {
            shadowColor: '#0B2352',
            shadowBlur: 4,
            shadowOffsetX: 0,
            shadowOffsetY: 8,
          },
        })
      })
    }
    const chart = echarts.init(chartsRef.value)
    chart.setOption(options)
  }
  onMounted(() => {
    window.addEventListener('resize', () => {
      initChart(data.value)
    })
  })

  defineExpose({
    initChart,
  })
</script>

<style></style>
